<template>
  <div class="container">
    <h2 class="title">计数器</h2>
    <!-- 第一组 -->
    <p class="group-title">普通增加</p>
    <div class="btn-group">
      <button class="btn" @click="store.subtract()">-</button>
      <!-- 这里我们希望这个数据来源于状态仓库 -->
      <div class="num">{{ store.num }}</div>
      <button class="btn" @click="store.increment()">+</button>
    </div>
    <!-- 第二组 -->
    <p class="group-title">Getters数据</p>
    <div class="btn-group">
      <button class="btn" @click="num--">-</button>
      <!-- 这里我们希望这个数据来源于状态仓库 -->
      <div class="num">{{ doubleCount }}</div>
      <button class="btn" @click="increment">+</button>
    </div>
     <!-- 第三组 -->
     <p class="group-title">异步的增加</p>
    <div class="btn-group">
      <button class="btn" @click="asyncDecrement">-</button>
      <!-- 这里我们希望这个数据来源于状态仓库 -->
      <div class="num">{{ num }}</div>
      <button class="btn" @click="asyncIncrement">+</button>
    </div>
    <!-- 第四组 -->
    <p class="group-title">store.$reset方法</p>
    <div class="btn-group">
      <button class="btn" @click="store.$reset">重置</button>
    </div>

    <!-- 第五组 -->
    <p class="group-title">store.$patch方法</p>
    <div class="btn-group">
      <input type="text" class="rounded-sm border-black numInput" v-model="newnum">
      <button class="btn" @click="setHandle">设置</button>
    </div>
  </div>
</template>

<script setup>
// 使用storeToRef后解构的数据不会失业响应式,action里面的方法不需要storeToRef
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/store/modules/usePinia/useCounterStore.js'
const store = useCounterStore()
const { num, doubleCount } = storeToRefs(store)
const { increment,asyncDecrement,asyncIncrement } = store

// 这个数据和输入框做双向绑定
const newnum = ref("");
console.log('全局store是否已添加进去-options页面',store.secret)
console.log('全局store是否已添加进去-options页面',store.test)
console.log('全局store里面useCounterStore独有的是否已添加进去-options页面',store.name)
const setHandle = () => {
  store.$patch({
    num: ~~newnum.value
  });
  newnum.value = "";
}

</script>

<style lang="scss" scoped>
.container {
  font-weight: 200;
}
.title{
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: #f00;
}
.container > .btn-group {
  /* outline: 1px solid red; */
  width: 280px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.num {
  font-size: 32px;
  font-weight: 300;
}
.btn {
  height: 30px;
  outline: none;
  font-size: 16px;
  font-weight: 100;
  cursor: pointer;
  padding: 0 10px;
}

.numInput {
  width: 200px;
  height: 30px;
  margin-right: 10px;
  border: 1px solid;
}

.group-title {
  text-align: center;
  margin-bottom: 0;
  font-weight: 200;
  font-size: 20px;
}
</style>